<template>
  <div>
    <table class="table" border="1" style="border-collapse: collapse;width: 100%;text-align: center;" bordercolor="#dddddd">
        <!--个人基本信息-->
        <tr>
          <td>姓名</td>
          <td style="height:40px;min-width: 50px;">{{previewData.playerInfo.name}}</td>
          <td>出生年月</td>
          <td style="height:40px;min-width: 50px;">{{previewData.playerInfo.birth}}</td>
          <td>民族</td>
          <td style="height:40px;min-width: 50px;">{{previewData.playerInfo.nation}}</td>
          <td>身高</td>
          <td style="height:40px;min-width: 50px;">{{previewData.playerInfo.height}}</td>
          <td>省注册号</td>
          <td style="height:40px;min-width: 100px;">{{previewData.playerInfo.schoolRoll}}</td>
        </tr>
        <tr>
          <td>性别</td>
          <td style="height:40px">{{previewData.playerInfo.gender}}</td>
          <td>所在单位</td>
          <td style="height:40px">{{previewData.playerInfo.org}}</td>
          <td>籍贯</td>
          <td style="height:40px">{{previewData.playerInfo.address}}</td>
          <td>体重</td>
          <td style="height:40px">{{previewData.playerInfo.weight}}</td>
          <td>身份证号</td>
          <td style="height:40px">{{previewData.playerInfo.idNo}}</td>
        </tr>
        <tr>
          <td>就读年级</td>
          <td style="height:40px">{{previewData.playerInfo.grade}}</td>
          <td>联系电话</td>
          <td style="height:40px">{{previewData.playerInfo.phone}}</td>
          <td>教练姓名</td>
          <td style="height:40px">{{previewData.playerInfo.coach}}</td>
          <td>骨龄</td>
          <td style="height:40px">{{previewData.playerInfo.boneAge}}</td>
          <td>户口所在地</td>
          <td style="height:40px">{{previewData.playerInfo.address}}</td>
        </tr>
      </table>
      <table border="1" style="border-collapse: collapse;width: 100%;text-align: center;margin-top: 5px;" bordercolor="#dddddd">
        <tr v-for="value,key,index in previewData.tendencyData" :key="index">
          <template v-if="index==0">
            <th>指标/时间</th>
            <th v-for="item,i in value" :key="i">{{item.createDate}}</th>
          </template>
          <template v-else>
            <td>{{dict_meta[value[0].metaId]}}</td>
            <td v-for="item,i in value" :key="i">{{item.ensureScore}}</td>
          </template>
        </tr>
      </table>
      <img v-if="printShow" :src="imgUrl" >
      <div v-show="!printShow" id="main" style="width: 100%;min-height:400px;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    props: ['previewData','dict_meta'],
    data() {
      return {
        option: {},
        myChart: '',
        imgUrl: '',
        printShow: false,
      }
    },
    mounted() {
      this.init_echarts()
    },
    watch: {
      previewData(val) {
        this.init_echarts()
      },
    },
    methods: {
      print() {
        this.imgUrl = this.myChart.getDataURL();
        this.printShow = true
      },
      init_echarts() {
        let ydata = []
        let xdata = []
        let legendData = []
        for(let key in this.previewData.tendencyData){
          legendData.push(this.dict_meta[key])
          let obj = {
            name: this.dict_meta[key],
            type: 'line',
            data: []
          }
          this.previewData.tendencyData[key].forEach(item=>{
            xdata.push(item.createDate)
            if(item.ensureScore!='-1'){
              obj.data.push(item.ensureScore)
            }
          })
          ydata.push(obj)
        }
        xdata = Array.from(new Set(xdata))

        this.myChart = echarts.init(document.getElementById('main'));
        this.option = {
          // title: {
          //   text: 'ECharts 入门示例'
          // },
          grid: {
              show: true,
              top: 120,
            },
          tooltip: {
            trigger: 'item',
            formatter: function(data)
            {
                return data.seriesName + '<br/>日期：' +data.name+ '<br/>结果：'+data.data;
             }
          },
          legend: {
            data: legendData
          },
          xAxis: {
          // type: 'time',
           // axisLabel: {
           //     interale: 0,
           //     formatter: function (value) {//在这里写你需要的时间格式
           //       var t_date = new Date(value);
           //       return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-')
           //     }
           //   },
            data: xdata
          },
          yAxis: {
          },
          series: ydata
        };

        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(this.option,true);
      }
    }

  }
</script>

<style scoped>

</style>
